<template>
<div class="person">
    <div class="person-top">
        <div class="top-left">
            <div class="header"></div>
            <span class="name">姓名</span>
        </div>
        <div class="top-right">
            <el-tooltip :content="'Switch value: ' + value5" placement="top" style="margin-right:0.2rem">
                <el-switch v-model="value5" active-color="#13ce66" inactive-color="#ff4949" active-value="100" inactive-value="0">
                </el-switch>
            </el-tooltip>
            <span>接单中</span>
        </div>
    </div>
    <div class="maincon">
        <ul class="conlist">
            <li class="conlist-child">
                <div @click="orderform('orderstat')">
                    <i class="iconfont">&#xe67b;</i>
                    <span>订单统计</span>
                </div>
                <i class="iconfont">&#xe601;</i>
            </li>
            <li class="conlist-child">
                <div  @click="orderform('withdraw')" >
                    <i class="iconfont">&#xe607;</i>
                    <span>申请提现</span>
                </div>
                <i class="iconfont">&#xe601;</i>
            </li>
            <li class="conlist-child">
                <div @click="orderform('paydetails')">
                    <i class="iconfont">&#xe63e;</i>
                    <span>账户明细</span>
                </div>
                <i class="iconfont">&#xe601;</i>
            </li>
        </ul>
    </div>
    <div class="shezhi"  @click="orderform('myset')">
        <div>
            <i class="iconfont">&#xe639;</i>
            <span style="margin-left:10px">我的设置</span>
        </div>
        <div>
          <i class="iconfont">&#xe601;</i>
        </div>
    </div>
</div>
</template>
<script>
import Router from '../../router'
export default {
  data () {
    return {
      value5: '100'
    }
  },
  methods: {
    orderform (url) {
      Router.push('/' + url)
    }
  }
}
</script>

<style lang="stylus" scoped>
.person
  width: 100%
  height: 13rem
  background: #f4f4f4
  padding-top 10px
  overflow hidden
  position fixed
  .person-top
    width: 100%
    height: 2rem
    background: #ffffff
    display flex
    justify-content space-between
    align-items center
    .top-left
      display flex
      flex-direction row
      align-items center
    .top-right
      display flex
      flex-direction column
      justify-content center
    .top-right span
      margin-top 0.2rem
    .header
      width: 1.5rem
      height: 1.5rem
      border-radius: 50%
      background: red
      margin-left .2rem
    .name
      margin-left 0.2rem
      font-size 0.4rem
      font-weight 1rem
  .shezhi
    display:flex;
    margin-top:10px;
    height:1rem;
    line-height:1rem;
    padding:0 20px;
    justify-content:space-between;
    background:#fff
    font-size 18px
  .maincon
    width 100%
    height 3rem
    margin-top 10px
    background #ffffff
    .conlist
      width 100%
      height 3rem
      .conlist-child
        height 1rem
        line-height 1rem
        border-bottom 1px solid #cccccc
        font-size 0.36rem
        display flex
        padding 0 20px
        justify-content space-between
      .conlist-child span
        margin-left 10px
      .conlist-child i:nth-child(1)
        font-size 0.38rem
        color #15b494
</style>
